<script setup lang="ts">
    import useStore from "@/store";
    import { LoginForm } from "@/types/user";
    import { Toast } from "vant";
    import { reactive, ref } from "vue";
    import { useRoute, useRouter } from "vue-router";
    // 登录信息
    const loginFrom: LoginForm = reactive({
        mobile: "13811111111",
        code: "246810",
    });
    const route = useRoute();
    const router = useRouter();
    const { user } = useStore();
    // 控制倒计时
    const isCountDownShow = ref(false);
    // 发送验证码
    const send = () => {
        isCountDownShow.value = true;
        user.sendCode(loginFrom.mobile)
            .then(() => {
                Toast({
                    type: "success",
                    message: "发送成功!",
                });
            })
            .catch(() => {
                Toast({
                    type: "fail",
                    message: "发送失败!",
                });
            });
    };
    // 提交表单
    const onSubmit = async () => {
        Toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 0, // 持续展示toast，永远不会关闭
            overlay: true, // 整体加个遮罩
        });
        try {
            await user.toLogin(loginFrom);
            Toast.success("登录成功");
            const backto = (route.query.backto as string) || "/";
            router.push(backto);
        } catch (error) {
            Toast({
                type: "fail",
                message: "验证码错误!",
            });
        }
    };
</script>
<template>
    <div class="login">
        <van-nav-bar
            title="用户登录"
            left-text="返回"
            left-arrow
            @click-left="$router.back()" />
        <!-- 登录表单 -->
        <van-form @submit="onSubmit">
            <van-field
                v-model="loginFrom.mobile"
                name="手机号"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'onBlur',
                    },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的11位手机号码',
                        trigger: 'onChange',
                    },
                ]">
            </van-field>
            <van-field
                type="password"
                name="验证码"
                label="验证码"
                v-model="loginFrom.code"
                placeholder="请输入验证码"
                :rules="[
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'onBlur',
                    },
                    {
                        pattern: /^\d{6}$/,
                        message: '请输入6位验证码',
                        trigger: 'onChange',
                    },
                ]">
                <template #button>
                    <van-count-down
                        v-if="isCountDownShow"
                        slot="button"
                        :time="1000 * 5"
                        format="ss s"
                        @finish="isCountDownShow = false" />
                    <van-button
                        v-else
                        class="send-sms-btn"
                        round
                        size="small"
                        type="default"
                        @click="send"
                        >发送验证码</van-button
                    >
                </template>
            </van-field>
            <div class="btn-wrap" style="margin: 16px">
                <van-button block type="success" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<style lang="scss">
    .login {
        .btn-wrap {
            padding: 20px;

            .van-button {
                width: 100%;
                color: #fff;
                background-color: #07c160;
                border-radius: 5px;
            }
        }
    }
</style>
